import React, { useState } from 'react'
import { Wrapper } from './style'
import { Tabs } from 'antd-mobile'
import { Link,NavLink } from 'react-router-dom'
import { px2rem } from '@/assets/global-style'
import classnames from 'classnames'
import { it } from 'node:test'
const Header = () => {
    const [activeKey,SetActiveKey]=useState('recommend')
    const TabsItems=[
        {index:0,key:'recommend',title:'推荐'},
        {index:1,key:'member',title:'会员'},
        {index:2,key:'activity',title:'活动'},
        {idnex:3,key:'festival',title:'运动节'}
    ]
    return (
        <Wrapper>
            <div className="tabs_wrapper">
                <Tabs 
                    onChange={key=>SetActiveKey(key)}
                    activeLineMode={'fixed'}
                    style={
                        {'--active-line-color':'black',
                        '--active-line-height':px2rem(6),
                        '--fixed-active-line-width':px2rem(20),}
                    }
                >
                    {TabsItems.map((item,index)=>{
                        return(
                            <Tabs.Tab 
                                title={

                                    <Link to={`/home/${item.key}`}>{item.title}</Link>
                                } 
                            key={item.key} 
                            className={classnames({active:(activeKey===item.key)})}/>
                        )
                    })}
                </Tabs>
            </div>
            <div className="sider_wrapper">
                <div className="icon icon_device">
                    <i className="iconfont icon-icon"></i>
                </div>
                <div className="icon icon_search">
                    <Link to='/search'style={{'color':'black'}}><i className="iconfont icon-sousuo"/></Link>
                    
                </div>
            </div>
        </Wrapper>
    )
}

export default Header
